<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习笔记 - 数智学习</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <link rel="stylesheet" href="/css/style.css">
    <style>
        /* Inter 字体声明 */
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('/font/inter/Inter-Regular.woff2') format('woff2');
        }
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 500;
            font-display: swap;
            src: url('/font/inter/Inter-Medium.woff2') format('woff2');
        }
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 600;
            font-display: swap;
            src: url('/font/inter/Inter-SemiBold.woff2') format('woff2');
        }

        /* Markdown 内容样式 */
        .markdown-content {
            color: #D1D5DB;
            line-height: 1.625;
            font-family: 'Inter', sans-serif;
        }
        .markdown-content > * + * {
            margin-top: 1rem;
        }
        .markdown-content h1 {
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: white;
        }
        .markdown-content h2 {
            font-size: 1.875rem;
            font-weight: 700;
            margin-bottom: 1rem;
            margin-top: 2rem;
            color: #60A5FA;
        }
        .markdown-content h3 {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            margin-top: 1.5rem;
            color: #A78BFA;
        }
        .markdown-content p {
            margin-bottom: 1rem;
            color: #D1D5DB;
        }
        .markdown-content ul {
            list-style-type: disc;
            margin-left: 1.5rem;
        }
        .markdown-content ul > * + * {
            margin-top: 0.5rem;
        }
        .markdown-content ol {
            list-style-type: decimal;
            margin-left: 1.5rem;
        }
        .markdown-content ol > * + * {
            margin-top: 0.5rem;
        }
        .markdown-content li {
            color: #D1D5DB;
            margin-left: 0.5rem;
        }
        .markdown-content li > p {
            display: inline;
        }
        .markdown-content code {
            background-color: rgba(31, 41, 55, 0.5);
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            color: #93C5FD;
        }
        .markdown-content pre {
            background-color: rgba(31, 41, 55, 0.5);
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
            overflow-x: auto;
        }
        .markdown-content pre code {
            background-color: transparent;
            padding: 0;
        }
        .markdown-content blockquote {
            border-left-width: 4px;
            border-color: #3B82F6;
            padding-left: 1rem;
            margin: 1rem 0;
            font-style: italic;
            color: #9CA3AF;
        }
        .markdown-content a {
            color: #60A5FA;
            text-decoration: none;
            transition: color 0.2s;
        }
        .markdown-content a:hover {
            color: #93C5FD;
        }
        .markdown-content img {
            max-width: 100%;
            border-radius: 0.5rem;
            margin: 1rem 0;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-purple-900 via-indigo-800 to-blue-900 text-white min-h-screen">
    <header class="fixed w-full z-50">
        <div class="absolute inset-0 backdrop-blur-lg bg-gradient-to-r from-gray-900/80 via-gray-900/70 to-gray-900/80"></div>
        
        <nav class="container mx-auto px-6 py-4 relative">
            <div class="flex items-center justify-between">
                <div class="logo flex items-center group">
                    <img src="/images/logo.svg" alt="数智学习" class="h-8 w-8 mr-2 transform group-hover:rotate-180 transition-transform duration-500">
                    <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500 
                               hover:from-blue-300 hover:to-purple-400 transition-all duration-300">数智学习</span>
                </div>

                <button class="md:hidden text-white hover:text-blue-400 transition-colors" id="mobile-menu-button">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>

                <ul class="nav-links hidden md:flex space-x-8">
                    <li><a href="../../index.html" class="hover:text-blue-400 transition-colors">首页</a></li>
                    <li><a href="../overview/experience.html" class="hover:text-blue-400 transition-colors">学习内容</a></li>
                    <li><a href="../overview/methods.html" class="hover:text-blue-400 transition-colors">学习方法</a></li>
                    <li><a href="../notes.html" class="text-blue-400">学习笔记</a></li>
                    <li><a href="../overview/thoughts.html" class="hover:text-blue-400 transition-colors">心得感悟</a></li>
                </ul>

                <!-- 移动端导航 -->
                <div class="mobile-menu hidden md:hidden mt-4">
                    <a href="../../index.html" class="block hover:text-blue-400 transition-colors">首页</a>
                    <a href="../overview/experience.html" class="block hover:text-blue-400 transition-colors">学习内容</a>
                    <a href="../overview/methods.html" class="block hover:text-blue-400 transition-colors">学习方法</a>
                    <a href="../notes.html" class="text-blue-400">学习笔记</a>
                    <a href="../overview/thoughts.html" class="block hover:text-blue-400 transition-colors">心得感悟</a>
                </div>
            </div>
        </nav>
    </header>

    <main class="pt-24">
        <div class="container mx-auto px-6 py-8">
            <div class="backdrop-blur-md bg-white bg-opacity-5 rounded-xl p-8">
                <div id="markdown-content" class="markdown-content animate__animated animate__fadeIn">
                    <div class="animate-pulse">
                        <div class="h-4 bg-gray-700/50 rounded w-3/4 mb-4"></div>
                        <div class="h-4 bg-gray-700/50 rounded w-1/2 mb-4"></div>
                        <div class="h-4 bg-gray-700/50 rounded w-5/6"></div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="container mx-auto px-6 py-8 text-center text-gray-400">
        <p class="mb-2">&copy; 2024 数智学习. All rights reserved.</p>
        <p><a href="https://beian.miit.gov.cn/" target="_blank" class="hover:text-blue-400 transition-colors">晋ICP备20000773号-3</a></p>
    </footer>

    <!-- 鼠标特效容器 -->
    <div class="trails-container"></div>
    <div class="cursor"></div>

    <script src="/js/menu.js"></script>
    <script src="/js/effects.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', async () => {
            try {
                const urlParams = new URLSearchParams(window.location.search);

                // 添加路径验证函数
                function isValidPath(path) {
                    // 只允许加载 /markdown 目录下的 .md 文件
                    const regex = /^\/markdown\/[a-zA-Z0-9-_]+\.md$/;
                    return regex.test(path);
                }

                // 修改文件加载逻辑
                const mdPath = urlParams.get('path');
                if (!mdPath || !isValidPath(mdPath)) {
                    throw new Error('Invalid markdown path');
                }

                const response = await fetch(mdPath);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const markdown = await response.text();

                // 配置marked选项
                marked.setOptions({
                    gfm: true,
                    breaks: true,
                    highlight: function(code, lang) {
                        return hljs.highlightAuto(code).value;
                    },
                    sanitize: true,  // 启用 HTML 标签过滤
                    sanitizer: function(html) {
                        // 自定义过滤规则
                        return html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
                    }
                });

                // 渲染markdown
                const content = marked.parse(markdown);
                document.getElementById('markdown-content').innerHTML = content;
                
                // 代码高亮
                document.querySelectorAll('pre code').forEach((block) => {
                    hljs.highlightBlock(block);
                });
            } catch (error) {
                console.error('Error:', error);
                document.getElementById('markdown-content').innerHTML = 
                    `<p class="text-red-500">加载笔记内容失败: ${error.message}</p>`;
            }
        });
    </script>
</body>
</html> 